React Developer Toolsでレンダリングを可視化する
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
React Developer Toolsは、React用開発ツールです。Reactの開発元であるMetaが提供しています。 結構有名ですが、まだ使ったことがない人に向け、簡単に書いていきます。
React Developer Toolsの使い方
拡張機能を追加します。
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
アイコンが追加されていることを確認します。通常のReactページで使用する場合、アイコンは青いですが、開発環境ではアイコンの色が赤くなります。
ローカル環境で使用するために、拡張機能の一覧から、React Developer Toolsの「拡張機能を管理」を選択します。
「ファイルのURLへのアクセスを許可する」をオンにします。
Reactを採用しているページで、デベロッパーツールを開くと、メニューに「Components」と、「Profiler」が追加されています。
Propsの確認
「Components」でpropsや、hooksの確認、レンダリング関係を見ることができます。
左側では、コンポーネントの階層を確認することができます。
右側では、以下を確認できます。
- コンポーネント名
- props
- hooks
- 親階層
- 親コンポーネントのどのファイルのどの部分から呼ばれたのか
以前はhooksの部分でstateを表示していたと思うのですが、hooksに変わっています。個人的にはstateの表示の方が良かった気がします。
レンダリング関係の確認
またReact Developer Toolsでは、stateの状態が変化したときに、再レンダリングされるコンポーネントを可視化することができます。
「View settings」を選択し、「Highlight updates when components render.」にチェックを入れます。
再レンダリング発生時に、緑のハイライトが現れるようになります。 今回の例ですと、「Component1」が再レンダリングされているのがわかります。
また、レンダリング数が多いと緑のハイライトが黄色くなっていきます。
レンダリングが可視化できると、毎回コンソールでログを表示しなくても、無駄なレンダリングが発生していないか確認することができます。
上記の例では、Component1をメモ化してみました。メモ化していないComponent2では、無駄なレンダリングが発生しているのが確認できます。
まとめ
React Developer Toolsを使うと、レンダリングの削減など、パフォーマンスの見直しに役立つと思います。他にも機能が存在しますので、Reactを使うときは、ぜひ使ってみてください。
ではまた。
